<template lang="pug">
  h4 COMB
  <!-- comb-gallery -->
  comb-preview(:combination="formData")
  form(@submit.prevent="handleSubmit")
    input(type="text", v-model.trim="formData.name" placeholder="name")
    select(v-model="formData.structure")
      option(disabled, value="undefined") structures
      option(v-for="structure in structures" :key="structure.id" :value="structure.value") {{structure.name}}
    select(v-model="formData.align" v-show="formData.structure !== 'coordinate'")
      option(disabled, value="undefined") alignments
      option(v-for="align in aligns[formData.structure]" :key="align.id" :value="align.value") {{align.name}}
    button(@click.prevent="addComponent") add component
    br

    <!-- ul.comb-form-area(v-show="formData.structure") -->
    ul.comb-form-area
      li(v-for="(component, idx) in formData.components" :key="idx")
        select(v-model="formData.components[idx].graphicId")
          option(disabled, value="undefined") graphics
          option(v-for="graphic in graphics" :key="graphic.id" :value="graphic.id") {{graphic.name}}
        select(v-model="formData.components[idx].based")
          option(disabled, value="undefined") based
          option(v-for="based in baseds" :key="based.id" :value="based.value") {{based.name}}
        button(@click="removeComponent(idx)" v-show="formData.components.length > 1") x

        br
        label {{ formData.components[idx].based}}
          input(type="number" step="0.01" v-model="formData.components[idx].size" placeholder="size") 
          span A
        br
        .coord(v-if="formData.structure === 'coordinate'")
          span left
          input(type="number" step="0.01" v-model="formData.components[idx].left" placeholder="left") 
          br
          span top
          input(type="number" step="0.01" v-model="formData.components[idx].top" placeholder="top") 
        .margin(v-if="!['coordinate', undefined].includes(formData.structure)")
          span L
          input(type="number" step="0.01" v-model="formData.components[idx].marginLeft" placeholder="marginLeft") 
          span R
          input(type="number" step="0.01" v-model="formData.components[idx].marginRight" placeholder="marginRight") 
          br
          span T
          input(type="number" step="0.01" v-model="formData.components[idx].marginTop" placeholder="marginTop") 
          span B
          input(type="number" step="0.01" v-model="formData.components[idx].marginBottom" placeholder="marginBottom") 

    br
    button(type="submit" :disabled="submitDisabled") create scheme
    button(@click="resetFormData") Reset
</template>

<script setup>
import { computed, ref, onMounted, watch, inject } from 'vue';
import api from '@/apis/api'
import { checkFormData } from '@/utils/js.util'
import { initialComponent, structures, aligns, baseds } from './comb-constant.js'
// import CombGallery from './comb-gallery.vue'
import CombPreview from './comb-preivew.vue'

const mainBrandId = inject('mainBrandId')
const graphics = inject('graphics')
const formData = ref({
  name: undefined,
  brandId: mainBrandId.value,
  isPrivate: false,
  safePadding: 0,
  minimumWdith: [],
  structure: undefined,
  align: undefined,
  components: [{ ...initialComponent }],
  // thumbnail: '',
})

const initialFormData = { ...formData.value, components: [{ ...initialComponent }] }
const handleSubmit = async () => {
  // console.log(formData.value)
  // await api.post('combinations', { ...formData.value })
  // resetFormData()
};

const addComponent = () => {
  const based = formData.value.structure === 'horizontal' ? 'height' : 'width'
  formData.value.components.push({ ...initialComponent, based })
}

const removeComponent = (index) => {
  formData.value.components = formData.value.components.filter((_, idx) => idx !== index)
}

const resetFormData = () => {
  for (let key in initialFormData) {
    formData.value[key] = initialFormData[key];
  }
};

watch(mainBrandId, async () => {
  formData.value.brandId = mainBrandId.value
})
const submitDisabled = computed(() => {
  const needMargin = formData.value.structure !== 'coordinate'
  formData.value.components.forEach((component, index) => {
    if (formData.value.structure !== 'coordinate') {
      delete formData.value.components[index].left;
      delete formData.value.components[index].top;
    } else {
      delete formData.value.components[index].marginLeft;
      delete formData.value.components[index].marginRight;
      delete formData.value.components[index].marginTop;
      delete formData.value.components[index].marginBottom;
    }
  })
  // return !checkFormData(formData.value, { debug: true })
  return !checkFormData(formData.value)
})
</script>
